{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
	.contraction span {
		cursor: pointer;
		display: inline-block;
		width: 17px;
		height: 17px;
		text-align: center;
		line-height: 14px;
		user-select: none;
	}
	.sku-list {
		overflow: hidden;
		padding: 0 45px;
		max-width: 100%;
	}
	.sku-list li .img-wrap {
		vertical-align: middle;
		margin-right: 8px;
		width: 120px;
		height: 120px;
		text-align: center;
		line-height: 120px;
	}
	.sku-list li .img-wrap img {
		max-width: 100%;
		max-height: 100%;
	}
	.sku-list li .info-wrap span.sku-name {
		-webkit-line-clamp: 2;
		margin-bottom: 5px;
	}
	.sku-list li .info-wrap span {
		display: -webkit-box;
		margin-bottom: 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.sku-list li {
		float: left;
		display: flex;
		padding: 10px;
		margin-right: 10px;
		margin-bottom: 10px;
		border: 1px solid #EFEFEF;
		width: 294px;
		height: 180px;
		align-items: center;
	}

</style>
{/block}
{block name="main"}
<div class="layui-collapse ns-tips">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">操作提示</h2>
		<ul class="layui-colla-content layui-show">
			<li>点击添加商品按钮可以添加限时折扣商品</li>
			<li>活动进行中商品的需先关闭才可进行删除操作</li>
			<li>点击删除按钮可以删除限时折扣商品</li>
			<li>时间超过折扣活动的结束时间时，活动自动结束</li>
		</ul>
	</div>
</div>

<div class="ns-single-filter-box">
	<button class="layui-btn ns-bg-color" onclick="add()">添加商品</button>

	<div class="layui-form">
		<div class="layui-input-inline">
			<input type="text" name="goods_name" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
			<button type="button" class="layui-btn layui-btn-primary" lay-filter="search" lay-submit>
				<i class="layui-icon">&#xe615;</i>
			</button>
		</div>
	</div>
</div>

<div class="layui-tab ns-table-tab" lay-filter="discount_tab">
	<ul class="layui-tab-title">
		<li class="layui-this" lay-id="">所有商品</li>
		<li lay-id="1">进行中</li>
		<li lay-id="2">已结束</li>
		<li lay-id="-1">已关闭</li>
	</ul>
	<div class="layui-tab-content">
		<!-- 列表 -->
		<table id="discount_list" lay-filter="discount_list"></table>
	</div>
</div>

<!-- 操作 -->
<script type="text/html" id="operation">
	<!-- 未开始 -->
	<div class="ns-table-btn">
		{{#  if(d.status == 0){ }}
		<a class="layui-btn" lay-event="edit">编辑</a>
		<a class="layui-btn" lay-event="del">删除</a>
		{{#  } }}
		<!-- 进行中  时间不能编辑-->
		{{#  if(d.status == 1){ }}
		<a class="layui-btn" lay-event="edit">编辑</a>
		<a class="layui-btn" lay-event="close">关闭</a>
		{{#  } }}
		<!-- 已结束 -->
		{{#  if(d.status == 2){ }}
		<a class="layui-btn" lay-event="detail">查看详情</a>
		<a class="layui-btn" lay-event="del">删除</a>
		{{#  } }}
		<!-- 已关闭 -->
		{{#  if(d.status == -1){ }}
		<a class="layui-btn" lay-event="detail">查看详情</a>
		<a class="layui-btn" lay-event="del">删除</a>
		{{#  } }}
	</div>
</script>

<script type="text/html" id="discount_name">
	<div class="ns-table-title">

		<div class="contraction" data-id="{{d.discount_id}}" data-open="0">
			<span>+</span>
		</div>

		<div class="ns-title-pic">
			{{#  if(d.goods_image){  }}
			<img layer-src src="{{ns.img(d.goods_image.split(',')[0],'small')}}"/>
			{{#  }  }}
		</div>
		<div class="ns-title-content">
			<a href="javascript:;" class="ns-multi-line-hiding ns-text-color"
			   title="{{d.goods_name}}">{{d.goods_name}}</a>
		</div>
	</div>
</script>

<script type="text/html" id="skuList">
	<tr class="js-list-{{d.index}}" id="sku_img_{{d.index}}">
		<td colspan="10">
			<ul class="sku-list">
				{{# for(var i=0; i<d.list.length; i++){ }}
				<li>
					<div class="img-wrap">
						<img layer-src src="{{ns.img(d.list[i].sku_image)}}">
					</div>
					<div class="info-wrap">
						<span class="sku-name" title="{{d.list[i].sku_name}}">{{d.list[i].sku_name}}</span>
						<span class="price">商品价格：￥{{d.list[i].price}}</span>
						<span class="sale_num">折扣价：{{d.list[i].discount_price}}</span>
						<span class="price">库存：{{d.list[i].stock}}</span>
					</div>
				</li>
				{{# } }}
			</ul>
		</td>
	</tr>
</script>

{/block}
{block name="script"}
<script>
	var laytpl;
	$("body").on("click", ".contraction", function () {

		var discount_id = $(this).attr("data-id");
		var open = $(this).attr("data-open");
		var tr = $(this).parent().parent().parent().parent();
		var index = tr.attr("data-index");
		if (open == 1) {
			$(this).children("span").text("+");
			$(".js-list-" + index).remove();
		} else {
			$(this).children("span").text("-");
			$.ajax({
				url: ns.url("discount://shop/discount/getSkuList"),
				data: {discount_id: discount_id},
				dataType: 'JSON',
				type: 'POST',
				async: false,
				success: function (res) {

					var sku_list = $("#skuList").html();
					var data = {
						list: res.data,
						index: index
					};
					laytpl(sku_list).render(data, function (html) {
						tr.after(html);
					});
					layer.photos({
						photos: '.img-wrap',
						anim: 5
					});
				}
			});
		}
		$(this).attr("data-open", (open == 0 ? 1 : 0));
	});

	layui.use(['form', 'element', 'laytpl'], function() {
		laytpl = layui.laytpl;
		var table,
			form = layui.form,
			element = layui.element,
			repeat_flag = false; //防重复标识
		form.render();

		//监听Tab切换，以改变地址hash值
		element.on('tab(discount_tab)', function() {
			table.reload({
				page: {
					curr: 1
				},
				where: {
					'status': this.getAttribute('lay-id')
				}
			});
		});

		table = new Table({
			elem: '#discount_list',
			url: ns.url("discount://shop/discount/lists"),
			cols: [
				[{
					title: '商品名称',
					unresize: 'false',
					width: '25%',
					templet: '#discount_name'
				}, {
					field: 'start_time',
					title: '开始时间',
					unresize: 'false',
					widht: '20%',
					templet: function(data) {
						return ns.time_to_date(data.start_time);
					}
				}, {
					field: 'end_time',
					title: '结束时间',
					unresize: 'false',
					width: '20%',
					templet: function(data) {
						return ns.time_to_date(data.end_time);
					}
				}, {
					field: 'status_name',
					title: '状态',
					unresize: 'false',
					width: '15%'
				}, {
					title: '操作',
					toolbar: '#operation',
					unresize: 'false',
					width: '19%'
				}]
			]
		});

		/**
		 * 监听工具栏操作
		 */
		table.tool(function(obj) {
			var data = obj.data;
			switch (obj.event) {
				case 'edit': //编辑
					location.href = ns.url("discount://shop/discount/edit", {
						"discount_id": data.discount_id,
						"site_id": data.site_id
					});
					break;
				case 'del': //删除
					layer.confirm('您确定要删除该限时折扣活动吗?', function() {
						if (repeat_flag) return;
						repeat_flag = true;

						$.ajax({
							url: ns.url("discount://shop/discount/delete"),
							data: data,
							dataType: 'JSON',
							type: 'POST',
							success: function(res) {
								layer.msg(res.message);
								repeat_flag = false;
								if (res.code == 0) {
									table.reload();
								}
							}
						});
					}, function() {
						layer.close();
						repeat_flag = false;
					});
					break;
				case 'close': //关闭
					layer.confirm('您确定要关闭吗?', function() {
						if (repeat_flag) return;
						repeat_flag = true;

						$.ajax({
							url: ns.url("discount://shop/discount/close"),
							data: data,
							dataType: 'JSON',
							type: 'POST',
							success: function(res) {
								repeat_flag = false;
								layer.msg(res.message);

								if (res.code == 0) {
									table.reload();
								}
							}
						});
					}, function() {
						layer.close();
						repeat_flag = false;
					});

					break;
				case 'add': //详情
					location.href = ns.url("discount://shop/discount/add");
					break;
				case 'detail': //详情
					location.href = ns.url("discount://shop/discount/detail", {
						"discount_id": data.discount_id
					});
					break;
			}
		});
		
		/**
		 * 搜索功能
		 */
		form.on('submit(search)', function(data) {
			table.reload({
				page: {
					curr: 1
				},
				where: data.field
			});
		});

	});

	function add() {
		location.href = ns.url("discount://shop/discount/add");
	}
</script>
{/block}